Let’s try something else with the maps, to complete the next part of the wireframe.

library(leaflet)
library(dplyr)
unesco <- read.csv('./dashboard_app/unesco.csv')
unesco %>% select(name_en, longitude,latitude)%>%head

So we can very easily create the map with markers as before.

unesco %>% 
      leaflet %>% setView(lng = -99.1013, lat = 19.2465, zoom = 5) %>%
      addTiles() %>%
      addMarkers(~longitude, ~latitude #, popup = ~as.character(name_en)
                 )

NA

The tiles for these maps are coming from OpenStreetMaps. Since it’s quite heavy to load over and over again we need to “preload” the map if we would like this map to change the map to user’s reaction. In code, we need to do something like this:

library(shiny)
library(leaflet)

############################  UI LOGIC ############################
ui <- fluidPage(
      leafletOutput("unescoMap"), selectInput("site", 
                            "Select a site", 
                            choices = levels(unesco$name_en), 
                            selected = levels(unesco$name_en)[2]))

############################  SERVER LOGIC ############################
server <- function(input,output,session){
 # The standard map we had, no surprises
  output$unescoMap <- renderLeaflet({
    unesco %>% 
      leaflet %>% setView(lng = -99.1013, lat = 19.2465, zoom = 5) %>%
      addTiles() %>%
      addMarkers(~longitude, ~latitude, popup = ~as.character(name_en))
    
  })
  
  ## A reactive object: filtering out the data from the chosen site
  chosenSite <- reactive({
    desc <- unesco%>%filter(name_en==input$site)
    desc
  })
  
  
  ## An observer event for the map: This looks on what has changed on the map and redraws accordingly
  observe({
    proxy <- leafletProxy("unescoMap", data=chosenSite())%>%
        removeMarker("chosen")%>%
      addCircleMarkers(~longitude, ~latitude,
                       color = "red", stroke = F,
                       fillOpacity = 0.7,
                       popup = ~as.character(name_en), layerId = "chosen")
  })
 
}

shinyApp(ui, server)
LS0tCnRpdGxlOiAiTGVjdHVyZSA0YjogUmVhY3RpdmUgZXhwcmVzc2lvbnMgaW4gbWFwcyIKb3V0cHV0OiBodG1sX25vdGVib29rCi0tLQoKTGV0J3MgdHJ5IHNvbWV0aGluZyBlbHNlIHdpdGggdGhlIG1hcHMsIHRvIGNvbXBsZXRlIHRoZSBuZXh0IHBhcnQgb2YgdGhlIHdpcmVmcmFtZS4KCgpgYGB7cn0KbGlicmFyeShsZWFmbGV0KQpsaWJyYXJ5KGRwbHlyKQp1bmVzY28gPC0gcmVhZC5jc3YoJy4vZGFzaGJvYXJkX2FwcC91bmVzY28uY3N2JykKdW5lc2NvICU+JSBzZWxlY3QobmFtZV9lbiwgbG9uZ2l0dWRlLGxhdGl0dWRlKSU+JWhlYWQKYGBgCgoKU28gd2UgY2FuIHZlcnkgZWFzaWx5IGNyZWF0ZSB0aGUgbWFwIHdpdGggbWFya2VycyBhcyBiZWZvcmUuCgoKYGBge3J9CnVuZXNjbyAlPiUgCiAgICAgIGxlYWZsZXQgJT4lIHNldFZpZXcobG5nID0gLTk5LjEwMTMsIGxhdCA9IDE5LjI0NjUsIHpvb20gPSA1KSAlPiUKICAgICAgYWRkVGlsZXMoKSAlPiUKICAgICAgYWRkTWFya2Vycyh+bG9uZ2l0dWRlLCB+bGF0aXR1ZGUgIywgcG9wdXAgPSB+YXMuY2hhcmFjdGVyKG5hbWVfZW4pCiAgICAgICAgICAgICAgICAgKQogICAgCmBgYAoKVGhlIHRpbGVzIGZvciB0aGVzZSBtYXBzIGFyZSBjb21pbmcgZnJvbSBPcGVuU3RyZWV0TWFwcy4gU2luY2UgaXQncyBxdWl0ZSBoZWF2eSB0byBsb2FkIG92ZXIgYW5kIG92ZXIgYWdhaW4gd2UgbmVlZCB0byAicHJlbG9hZCIgdGhlIG1hcCBpZiB3ZSB3b3VsZCBsaWtlIHRoaXMgbWFwIHRvIGNoYW5nZSB0aGUgbWFwIHRvIHVzZXIncyByZWFjdGlvbi4gSW4gY29kZSwgd2UgbmVlZCB0byBkbyBzb21ldGhpbmcgbGlrZSB0aGlzOgoKCmBgYHtyLCBldmFsPUYsIGVjaG89VH0KCmxpYnJhcnkoc2hpbnkpCmxpYnJhcnkobGVhZmxldCkKCiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMgIFVJIExPR0lDICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMKdWkgPC0gZmx1aWRQYWdlKAogICAgICBsZWFmbGV0T3V0cHV0KCJ1bmVzY29NYXAiKSwgc2VsZWN0SW5wdXQoInNpdGUiLCAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICJTZWxlY3QgYSBzaXRlIiwgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjaG9pY2VzID0gbGV2ZWxzKHVuZXNjbyRuYW1lX2VuKSwgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzZWxlY3RlZCA9IGxldmVscyh1bmVzY28kbmFtZV9lbilbMl0pKQoKIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyAgU0VSVkVSIExPR0lDICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMKc2VydmVyIDwtIGZ1bmN0aW9uKGlucHV0LG91dHB1dCxzZXNzaW9uKXsKICMgVGhlIHN0YW5kYXJkIG1hcCB3ZSBoYWQsIG5vIHN1cnByaXNlcwogIG91dHB1dCR1bmVzY29NYXAgPC0gcmVuZGVyTGVhZmxldCh7CiAgICB1bmVzY28gJT4lIAogICAgICBsZWFmbGV0ICU+JSBzZXRWaWV3KGxuZyA9IC05OS4xMDEzLCBsYXQgPSAxOS4yNDY1LCB6b29tID0gNSkgJT4lCiAgICAgIGFkZFRpbGVzKCkgJT4lCiAgICAgIGFkZE1hcmtlcnMofmxvbmdpdHVkZSwgfmxhdGl0dWRlLCBwb3B1cCA9IH5hcy5jaGFyYWN0ZXIobmFtZV9lbikpCiAgICAKICB9KQogIAogICMjIEEgcmVhY3RpdmUgb2JqZWN0OiBmaWx0ZXJpbmcgb3V0IHRoZSBkYXRhIGZyb20gdGhlIGNob3NlbiBzaXRlCiAgY2hvc2VuU2l0ZSA8LSByZWFjdGl2ZSh7CiAgICBkZXNjIDwtIHVuZXNjbyU+JWZpbHRlcihuYW1lX2VuPT1pbnB1dCRzaXRlKQogICAgZGVzYwogIH0pCiAgCiAgCiAgIyMgQW4gb2JzZXJ2ZXIgZXZlbnQgZm9yIHRoZSBtYXA6IFRoaXMgbG9va3Mgb24gd2hhdCBoYXMgY2hhbmdlZCBvbiB0aGUgbWFwIGFuZCByZWRyYXdzIGFjY29yZGluZ2x5CiAgb2JzZXJ2ZSh7CiAgICBwcm94eSA8LSBsZWFmbGV0UHJveHkoInVuZXNjb01hcCIsIGRhdGE9Y2hvc2VuU2l0ZSgpKSU+JQogICAgICAgIHJlbW92ZU1hcmtlcigiY2hvc2VuIiklPiUKICAgICAgYWRkQ2lyY2xlTWFya2Vycyh+bG9uZ2l0dWRlLCB+bGF0aXR1ZGUsCiAgICAgICAgICAgICAgICAgICAgICAgY29sb3IgPSAicmVkIiwgc3Ryb2tlID0gRiwKICAgICAgICAgICAgICAgICAgICAgICBmaWxsT3BhY2l0eSA9IDAuNywKICAgICAgICAgICAgICAgICAgICAgICBwb3B1cCA9IH5hcy5jaGFyYWN0ZXIobmFtZV9lbiksIGxheWVySWQgPSAiY2hvc2VuIikKICB9KQogCn0KCnNoaW55QXBwKHVpLCBzZXJ2ZXIpCgpgYGAKCgo=